<template>
  <view>
    <view class="header">
      <image src="./back.png" mode="" @tap="goBack"></image>
      <span>详情</span>
      <image src="./likr.png" mode=""></image>
    </view>
    <view class="kb"></view>
    <view class="contain">
      <view class="first" v-for="item in follow" :key="item.id">
        <!-- 关注 -->
        <view class="keey"> +关注 </view>
        <!-- 关注 -->
        <view class="contain-top">
          <image class="contain-top-image" src="./bg.png" mode=""></image>
          <view class="right">
            <view class="top">
              <view class="name">
                {{ item.name }}
              </view>
              <view class="bq">
                {{ item.bq }}
              </view>
            </view>
            <view class="time">
              {{ item.time }}
            </view>
          </view>
        </view>
        <view class="text">
          <span>{{ item.smtit }}</span>
          <view class="bq">
            {{ item.status }}
          </view>
        </view>
        <view class="first-main">
          <view class="title">
            {{ item.neirong }}
          </view>
          <view class="img">
            <image
              class="image"
              :src="v"
              v-for="(v, i) in item.imgs"
              :key="i"
              mode=""
              @tap="showBigImg(v)"
            ></image>
            <!-- <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image>
            <image class="image" src="./bg.png" mode=""></image> -->
          </view>
          <!-- <view class="bottom"
            ><view class="time">
              {{ item.time }}
            </view>
            <view>
              <u-icon name="more-dot-fill" color="#444" size="40"></u-icon>
            </view>
          </view> -->

          <view class="button"> </view>
        </view>
      </view>
    </view>
    <view class="center">
      <view class="center-left">
        <span>评论</span>
        <span>55</span>
      </view>
      <view class="center-right">
        <span class="center-right-one">按推荐</span>
        <span class="center-right-two">按时间</span>
      </view>
    </view>
    <!--  -->
    <!-- 评论区 -->
    <scroll-view scroll-y="true" style="height: 750rpx; margin-top: 30rpx">
      <view class="comment-main">
        <view
          class="comment-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <view class="commentFirst">
            <view class="creatInfo">
              <view class="creatInfo-left">
                <image class="header-face" :src="item.image"></image>
                <view>
                  <view>{{ item.createByName }}</view>
                  <view class="time">
                    {{ item.createTime }}
                  </view></view
                >
              </view>
              <view class="creatInfo-right">
                <u-icon name="thumb-up" size="40" color="#ccc"></u-icon>
                <view>{{ item.like }}</view>
              </view>
            </view>
            <view class="details">{{ item.details }}</view>
          </view>
          <view class="commentChild"
            ><view
              v-for="(v, i) in item.child"
              :key="i"
              class="commentChild-item"
              @tap="getComment"
            >
              <view>
                <view class="creatInfo">
                  <view class="creatInfo-left">
                    <image class="header-face" :src="v.image"></image>
                    <view>
                      <view>{{ v.createByName }}</view>
                      <view class="time">
                        {{ v.createTime }}
                      </view></view
                    >
                  </view>
                  <view class="creatInfo-right">
                    <u-icon name="thumb-up" size="40" color="#ccc"></u-icon>
                    <view>{{ v.like }}</view>
                  </view>
                </view>
                <view class="details">{{ v.details }}</view>
              </view>
            </view></view
          >
        </view>
      </view></scroll-view
    >
    <view class="subComment">
      <u-input v-model="commentValue" @tap="firstComment" type="text" />
      <view class="sub-btns">
        <view class="sub-btn">
          <u-icon name="chat" color="#aaa" size="40"></u-icon>
          <view>{{ allComment }}</view>
        </view>
        <view class="sub-btn">
          <u-icon name="star" color="#aaa" size="40"></u-icon>
          <view>{{ allLike }}</view>
        </view>
        <view class="sub-btn">
          <u-icon name="thumb-up" color="#aaa" size="40"></u-icon>
          <view>{{ allGood }}</view>
        </view>
      </view>
    </view>
    <!-- 评论结束 -->
    <!-- 弹出层评论 -->
    <u-popup v-model="show" mode="bottom">
      <scroll-view scroll-y="true" style="height: 750rpx; margin-top: 30rpx">
        <view class="comment-main">
          <view
            class="comment-item"
            v-for="(item, index) in commentList"
            :key="index"
          >
            <view class="commentFirst">
              <view class="creatInfo">
                <view class="creatInfo-left">
                  <image class="header-face" :src="item.image"></image>
                  <view>
                    <view>{{ item.createByName }}</view>
                    <view class="time">
                      {{ item.createTime }}
                    </view></view
                  >
                </view>
                <view class="creatInfo-right">
                  <u-icon name="thumb-up" size="40" color="#ccc"></u-icon>
                  <view>{{ item.like }}</view>
                </view>
              </view>
              <view class="details">{{ item.details }}</view>
            </view>
            <view class="commentChild"
              ><view
                v-for="(v, i) in item.child"
                :key="i"
                class="commentChild-item"
              >
                <view>
                  <view class="creatInfo">
                    <view class="creatInfo-left">
                      <image class="header-face" :src="v.image"></image>
                      <view>
                        <view>{{ v.createByName }}</view>
                        <view class="time">
                          {{ v.createTime }}
                        </view></view
                      >
                    </view>
                    <view class="creatInfo-right">
                      <u-icon name="thumb-up" size="40" color="#ccc"></u-icon>
                      <view>{{ v.like }}</view>
                    </view>
                  </view>
                  <view class="details">{{ v.details }}</view>
                </view>
              </view></view
            >
          </view>
        </view></scroll-view
      >
      <view class="subComment2">
        <u-input
          class="input"
          v-model="commentValue"
          placeholder="说点什么呗"
          type="text"
        />
        <view class="subBtn">发送</view>
      </view>
    </u-popup>
    <!-- 快速评论弹出层 -->
    <u-popup
      v-model="commentShow"
      mode="bottom"
      border-radius="14"
      height="460px"
    >
      <view class="commentTitle">
        <view class="title">全部评论</view>
      </view>
      <view class="close" @tap="closeCommentShow">收起</view>
      <view class="center">
        <view class="center-left">
          <span>评论</span>
          <span>55</span>
        </view>
        <view class="center-right">
          <span class="center-right-one">按推荐</span>
          <span class="center-right-two">按时间</span>
        </view>
      </view>
      <scroll-view scroll-y="true" style="height: 800rpx; margin-top: 30rpx">
        <view class="comment-main">
          <view
            class="comment-item"
            v-for="(item, index) in commentList"
            :key="index"
          >
            <view class="commentFirst">
              <view class="creatInfo">
                <view class="creatInfo-left">
                  <image class="header-face" :src="item.image"></image>
                  <view>
                    <view>{{ item.createByName }}</view>
                    <view class="time">
                      {{ item.createTime }}
                    </view></view
                  >
                </view>
                <view class="creatInfo-right">
                  <u-icon name="thumb-up" size="40" color="#ccc"></u-icon>
                  <view>{{ item.like }}</view>
                </view>
              </view>
              <view class="details">{{ item.details }}</view>
            </view>
            <view class="commentChild"
              ><view
                v-for="(v, i) in item.child"
                :key="i"
                class="commentChild-item"
              >
                <view>
                  <view class="creatInfo">
                    <view class="creatInfo-left">
                      <image class="header-face" :src="v.image"></image>
                      <view>
                        <view>{{ v.createByName }}</view>
                        <view class="time">
                          {{ v.createTime }}
                        </view></view
                      >
                    </view>
                    <view class="creatInfo-right">
                      <u-icon name="thumb-up" size="40" color="#ccc"></u-icon>
                      <view>{{ v.like }}</view>
                    </view>
                  </view>
                  <view class="details">{{ v.details }}</view>
                </view>
              </view></view
            >
          </view>
        </view>
      </scroll-view>
      <view class="subComment">
        <u-input v-model="commentValue" placeholder="说点什么呗" type="text" />
        <view class="sub-btns">
          <view class="sub-btn">
            <u-icon name="chat" color="#aaa" size="40"></u-icon>
            <view>{{ allComment }}</view>
          </view>
          <view class="sub-btn">
            <u-icon name="star" color="#aaa" size="40"></u-icon>
            <view>{{ allLike }}</view>
          </view>
          <view class="sub-btn">
            <u-icon name="thumb-up" color="#aaa" size="40"></u-icon>
            <view>{{ allGood }}</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      commentShow: false,
      follow: [
        {
          id: 1,
          name: "C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          smtit: "跑步人的一天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          imgs: [
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
          ],
        },
      ],
      allComment: 13,
      allLike: 20,
      allGood: 20,
      commentNum: 42,
      type: 1,
      commentValue: "",
      commentList: [
        {
          createByName: "小貂蝉",
          createTime: "2022-12-20 11:00:00",
          details: "测试",
          like: 10,
          image: require("@/static/img/header.jpg"),
          child: [
            {
              createByName: "子龙111",
              createTime: "2022-12-20 11:00:00",
              details: "测试",
              image: require("@/static/img/header.jpg"),
              like: 3,
            },
            {
              createByName: "刘备",
              createTime: "2022-12-20 11:00:00",
              details: "测试1111111",
              image: require("@/static/img/header.jpg"),
              like: 3,
            },
            {
              createByName: "飞飞",
              createTime: "2022-12-20 11:00:00",
              details: "测试",
              image: require("@/static/img/header.jpg"),
              like: 3,
            },
          ],
        },
        {
          createByName: "李元芳",
          createTime: "2022-12-20 11:00:00",
          details: "测试",
          like: 3,
          image: require("@/static/img/header.jpg"),
        },
      ],
      show: false,
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    getComment() {
      console.log(222);
      this.show = true;
    },
    //点击放大图片
    showBigImg(img) {
      let arr = [];
      arr.push(img);
      console.log(arr, "图片的地址");
      uni.previewImage({
        current: 0,
        urls: arr, //必须是网址路径，否则加载不出来，如：http：或https：
      });
    },
    firstComment() {
      console.log(1111);
      this.commentShow = true;
    },
    closeCommentShow() {
      this.commentShow = false;
    },
  },
};
</script>

<style lang="scss">
.header {
  width: 750rpx;
  height: 160rpx;
  position: fixed;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 20rpx;
  font-size: 36rpx;
  z-index: 10;
  background-color: #ffffff;
  margin-bottom: 30rpx;
  image {
    width: 60rpx;
    height: 60rpx;
  }
}
.kb {
  width: 750rpx;
  height: 180rpx;
}
.contain {
  width: 750rpx;
  // height: 1210rpx;
  background-color: #ffffff;
  padding: 0 20rpx;
  .first {
    width: 100%;
    // height: 600rpx;
    // border: 1px solid red;
    border-bottom: 1px solid #d2d2d2;
    margin-bottom: 40rpx;
    position: relative;
    .keey {
      position: absolute;
      width: 104rpx;
      height: 48rpx;
      border-radius: 24rpx;
      line-height: 48rpx;
      color: #ff5c58;

      top: 10rpx;
      right: 30rpx;
      border: 1rpx solid red($color: #000000);
      background-color: #ffcdd1;
      text-align: center;
    }
    .contain-top {
      width: 100%;
      height: 150rpx;
      // border: 1px solid red;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .contain-top-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      .right {
        width: 300rpx;
        height: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        .top {
          width: 100%;
          height: 75rpx;
          // border: 1px solid red;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .name {
            margin-right: 20rpx;
            font-size: 28rpx;
          }
          .bq {
            border-radius: 10rpx;
            height: 40rpx;
            background-color: #15f6a4;
            font-size: 16rpx;
            line-height: 20rpx;
            color: #12ca87;
            padding: 10rpx;
          }
        }
        .time {
          width: 100%;
          height: 75rpx;
          // border: 1px solid red;
          &:hover {
            color: #acacac;
          }
        }
      }
    }
    .text {
      font-size: 30rpx;
      font-weight: 400;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 60rpx;
      // border: 1px solid red;
      margin-bottom: 10rpx;
      .bq {
        font-size: 10rpx;
        background-color: #b2b2b2;
        padding: 0 20rpx;
        margin-left: 20rpx;
      }
    }
    .first-main {
      width: 100%;
      // height: 200rpx;
      // border: 1px solid red;

      .title {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 20rpx;
      }
      .img {
        width: 100%;
        .image {
          width: 220rpx;
          height: 150rpx;
          margin: 0 8rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }
      }
      .button {
        width: 100%;
        height: 60rpx;
        // border: 1rpx solid red;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          .left-img {
            width: 300rpx;
            height: 40rpx;
          }
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 400rpx;
          height: 60rpx;
          // border: 1px solid red;
          .lj {
            width: 100%;
            height: 100%;
            border: 1px solid blue;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-right: 5rpx;
            image {
              width: 40rpx;
              height: 40rpx;
              // border: 1px solid #FF3C2A;
            }
          }
        }
      }
      // .bottom{
      //   display: flex;
      //   justify-content: space-between;
      // }
    }
  }
}
.center {
  width: 100%;
  height: 60rpx;
  // border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  margin-top: 50rpx;
  font-size: 32rpx;
  .center-left {
    span {
      margin-right: 10rpx;
    }
  }
  .center-right {
    width: 260rpx;
    font-size: 28rpx;
    color: #9d9d9d;
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    .center-right-one {
      width: 130rpx;
      border-right: 1px solid #3c3c3c;
    }
    .center-right-two {
      width: 130rpx;
    }
  }
}
// 评论
.comment-main {
  .comment-item {
    margin-top: 40rpx;
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid #ccc;
    padding: 0 20rpx;

    .commentFirst {
      .creatInfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .creatInfo-left {
          display: flex;
          align-items: center;
          .header-face {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }
          .time {
            color: #aaa;
            margin-top: 10rpx;
          }
        }
        .creatInfo-right {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          color: #aaa;
        }
      }
      .details {
        margin-top: 30rpx;
      }
    }
    .commentChild {
      padding: 0 0 0 40rpx;
      background-color: #eee;
      padding: 20rpx;
      margin-top: 30rpx;
      margin-bottom: 100rpx;
      .commentChild-item {
        margin-top: 20rpx;
        .creatInfo {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .creatInfo-left {
            display: flex;
            align-items: center;
            .header-face {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;

              margin-right: 20rpx;
            }
            .time {
              color: #aaa;
              margin-top: 10rpx;
            }
          }
          .creatInfo-right {
            display: flex;
            align-items: center;
            font-size: 30rpx;
            color: #aaa;
          }
        }
        .details {
          margin-top: 30rpx;
        }
      }
    }
  }
}
.subComment {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  .sub-btns {
    display: flex;
    .sub-btn {
      margin-left: 20rpx;
      display: flex;
    }
  }
}
.subComment2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20rpx;
  .input {
    flex: 1;
  }
  .subBtn {
    width: 80rpx;
    color: #f4333c;
    font-size: 28rpx;
  }
}
.commentTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
  .title {
    color: #333333;
    align-self: center;
    font-size: 32rpx;
    text-align: right;
  }
}
.close {
  color: #9d9d9d;
  font-size: 28rpx;
  text-align: right;
  margin-right: 30rpx;
  margin-top: -40rpx;
}
</style>
